<template>
  <div class="app-home">
    <Row :gutter="16" class="quick-menu">
      <Col :xl="3" :lg="4" :md="8" :sm="8" :xs="8">
        <Card :bordered="false">
          <Icon type="md-paper" size="32" color="#69c0ff"/>
          <p class="name">菜单1</p>
        </Card>
      </Col>
      <Col :xl="3" :lg="4" :md="8" :sm="8" :xs="8">
        <Card :bordered="false">
          <Icon type="md-search" size="32" color="#95de64"/>
          <p class="name">菜单2</p>
        </Card>
      </Col>
      <Col :xl="3" :lg="4" :md="8" :sm="8" :xs="8">
        <Card :bordered="false">
          <Icon type="md-cube" size="32" color="#ff9c6e"/>
          <p class="name">菜单3</p>
        </Card>
      </Col>
      <Col :xl="3" :lg="4" :md="8" :sm="8" :xs="8">
        <Card :bordered="false">
          <Icon type="md-person-add" size="32" color="#b37feb"/>
          <p class="name">菜单4</p>
        </Card>
      </Col>
      <Col :xl="3" :lg="4" :md="8" :sm="8" :xs="8">
        <Card :bordered="false">
          <Icon type="md-apps" size="32" color="#ffd666"/>
          <p class="name">菜单5</p>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        testForm: {
          id: 1,
          name: '',
          status: 0
        },
      }
    },
    created() {
      // this.$FormClass.initForm(this, ['testForm'])
    },

    methods: {

      linkTo(name) {
        this.$router.push({name: name})
      },

    }
  }
</script>

<style lang="stylus" scoped>
  .app-home
    .quick-menu
      text-align center

      .ivu-col
        margin-bottom 16px
        cursor pointer

      .name
        margin-top 8px
</style>
